<script setup>
import carousel from "../components/index/carousel.vue"
import SearchBlog from "../components/Search/searchBlog.vue"
import { useRouter } from "vue-router"
import {ref} from "vue"
const router = useRouter()
const limit = ref(8)
const blog = [{
    limit:limit,
    categories:{
        title:"互联网",
        id:2
    }
},{
    limit:limit,
    categories:{
        title:"前端",
        id:3
    }
},{
    limit:limit,
    categories:{
        title:"后端",
        id:4
    }
},]
function GotoCategories(value) {
    const url = router.resolve({ name: 'BlogCategories', params: { id:value } }).href
    window.open(url, '_blank')
}
function ProjectDetails(){
    const url = router.resolve({ name: 'ProjectDetails' }).href
    window.open(url, '_blank')

}
</script>

<template>
    <!-- 轮播图 -->
<carousel></carousel>
<el-row class="categories" >
    <el-col @click="GotoCategories(1)" :span="8">
        <el-button>
            <div class="categories_button">
        </div>
            闲聊 
            <el-icon>
                <ChatDotRound />
            </el-icon>
            </el-button>
        </el-col>
        <el-col  @click="GotoCategories(5)" :span="8">
        <el-button>
            <div class="categories_button">
        </div>
            算法 
            <el-icon>
                <Cpu />
            </el-icon>
            </el-button>
        </el-col>
        <el-col  @click="ProjectDetails()"  :span="8">
        <el-button>
            <div class="categories_button">
        </div>
            关于我们 
            <el-icon>
                <InfoFilled />
            </el-icon>
            </el-button>
        </el-col>
</el-row>
<div class="contentBox" >
    <div class="content" v-for="item in blog" > 
        <SearchBlog :blog="item" ></SearchBlog>  
    </div>

    
</div>
</template>
<style scoped>
.categories{
    height: 75px;
    text-align: center;
    background-color: white;
}
.categories .el-col:hover .categories_button {
    background-color: #037AFF;;
    height: 50px;
    width: 5px;

}
.categories .el-col:hover .el-button {
    color: #037AFF;
}
.categories .categories_button{
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    transition: 0.3s;
    background-color: rgb(109, 109, 109);
}

.categories .el-button{
    background-color: #2f323403;
    color: #2F3234;
    font-size: 25px;
    font-weight:1000;
    border: 0px;
}
.categories .el-button:hover{
    background-color: #2f323403;
}
.categories .el-button .el-icon{
    margin: 10px;
}

.contentBox{
    margin-top: 20px;
    margin-bottom: 20px;
}
.contentBox .content{
    padding: 0px 50px 0px 50px;
}
</style>
  